<template>
  <el-tabs v-model="activeName" type="border-card" class="aside-tabs">
    <el-tab-pane label="Repair" name="Repair">
      <h1>同步数据库表、字段</h1>
      <span>禁用：</span>
      <el-switch
        v-model="isDisabled"
        active-color="#13ce66"
        inactive-color="#ff4949"
      />
    </el-tab-pane>
    <el-tab-pane label="HomePage" name="HomePage">
      <OtnHomePage :isDisabled="isDisabled" />
    </el-tab-pane>
    <el-tab-pane label="Goods" name="Goods">
      <OtnGoods :isDisabled="isDisabled" />
    </el-tab-pane>
    <el-tab-pane label="Order" name="Order">
      <OtnOrder :isDisabled="isDisabled" />
    </el-tab-pane>
    <!-- <el-tab-pane label="GoodsCategory" name="GoodsCategory">Config</el-tab-pane>
    <el-tab-pane label="User" name="User">Role</el-tab-pane> -->
    <el-tab-pane label="User" name="User">
      <OtnUser :isDisabled="isDisabled" />
    </el-tab-pane>
    <el-tab-pane label="UserIncome" name="UserIncome">
      <OtnUserIncome :isDisabled="isDisabled" />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import OtnHomePage from './otn-home-page.vue';
import OtnGoods from './otn-goods.vue';
import OtnOrder from './otn-order.vue';
import OtnUser from './otn-user.vue';
import OtnUserIncome from './otn-user-income.vue';

const activeName = ref('Repair');

const isDisabled = ref(true);
</script>

<style lang="scss" scoped>
.aside-tabs {
  max-height: 100%;

  :deep(.el-tabs__content) {
    height: calc(100vh - 140px);
  }

  :deep(.el-tab-pane) {
    height: 100%;
  }
}
</style>
